<!--
 * @Author: wang_sheshe
 * @Date: 2021-08-23 11:20:00
 * @LastEditTime: 2021-08-25 18:57:28
 * @Description: 工作票-选择典型票
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
            <template slot="header_icon">
				<van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
                <van-image class="imgSize" width="20" height="20" @click="scanBtn" :src="icon.scan" />
			</template>
        </Theader>
        <!-- 搜索区域 -->
		<div class="search_header center_center">
			<van-search v-model.trim="taskName" clearable @input="focus" background="#F5F6FA" placeholder="输入典型票名称">
			</van-search> 
		</div>
        <div class="content" style="overflow-y: auto;height: 100%;padding-bottom: 3rem;">
            <div style="margin: 0.7rem;">
				<van-checkbox-group v-model="result">
					<van-cell-group>
						<van-cell
						v-for="(item, index) in tickList"
						:key="index"
						:title="item.name"
						>
							<template slot="right-icon">
								<van-checkbox :name="item.id" ref="checkboxes" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-checkbox-group>
			</div>
        </div>
        <!--底部按钮-->
        <div class="btn">
            <van-button color="#17B49B" @click="submitFile" style="width: 80%;" size="small" type="primary">确认</van-button>
        </div>

	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "typicalTicketList",
		components:{
			Theader,
		},
		data() {
			return {
                title: "选择典型票",
				tickList:[
					{
						id: "111",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "222",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "333",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "444",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "555",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "666",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
					{
						id: "777",
						name:"票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称票名称"
					},
				],
				result:[],
                taskName:"",
                showScreen:false,
                icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
				},
			}
		},
		computed: {

		},
		methods: {
            back(){
                this.$router.go(-1)
            },
            //rifid 
            rfidBtn() {

            },
            focus() {
                
            },
            //扫描二维码
            scanBtn() {

            },
            submitFile() {
                this.$router.push({
					name: "cycleReduceFileAlert",
				})
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
    .center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
	.search_header{
		margin-top: 60px;
		margin-right: 0.7rem;
	}
	.search_header /deep/ .van-search{
		flex:1;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		border-radius: 0.7rem;
	}
	.content /deep/ .van-cell-group{
		background-color: #F0F0F0;
	}
	.content /deep/ .van-cell{
		margin-bottom: 0.7rem;
		border-radius: 0.7rem;
	}

    .btn{
        width: 100%;
        background: rgb(255, 255, 255);
        padding: 0.5rem 0px;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
    }
    
</style>


